<script setup lang="ts">
import api from '../../api/api';
import { useRouter } from 'vue-router'
import { usestore } from '../../store';

const router = useRouter()
let getHeight = ref('')
let categoryname = ref<string[]>([])
const tableData = ref<any[]>([])
const { user } = usestore()
const collectionData = ref<any[]>([])

const getcategory = (tableData: any[]) => {
    for (let i = 0; i < tableData.length; i++) {
        let temp = false
        for (let j = 0; j < categoryname.value.length; j++) {
            if (tableData[i].categoryName == categoryname.value[j]) {
                temp = true
                break
            }
        }
        if (!temp)
            categoryname.value.push(tableData[i].categoryName)
    }
}

const getcategorycon = (categoryname: string) => {
    const arr = [] as any[]
    tableData.value.forEach((item) => {
        if (item.categoryName == categoryname) {
            arr.push(item)
        }
    })
    return arr
}

const turntonews = (item: any) => {
    api.newsclick({ newsId: item.newsId })
        .then(res => {
            if (res.data.code == 200) {
                router.push({
                    name: 'newcontent',
                    params: { newsId: item.newsId }
                })
            }
        })
}

const getfilename = (url: string) => {
    const fileurl = decodeURI(url)
    if (fileurl != '') {
        return fileurl.split('/')[4].split('?')[0]
    }
    return ''
}

const showif = (url: string) => {
    const fileurl = getfilename(url)
    if (fileurl != '' && fileurl.split('.')[1] == 'mp4') {
        return true
    }
    return false
}

onMounted(() => {

    api.getcollection({ userId: user.userId })
        .then(res => {
            if (res.data.code == 200) {
                collectionData.value = res.data.data
                const data = JSON.stringify(collectionData.value.map((item: any) => item.newsId)).replace(/[^,\d]/g, '')
                api.getNewsById({ newsIds: data })
                    .then(res => {
                        if (res.data.code == 200)
                            tableData.value = res.data.data
                        getcategory(tableData.value)
                    })
            }
        })

    getHeight.value = window.innerHeight - 116 + 'px'
    window.onresize = () => {
        getHeight.value = window.innerHeight - 116 + 'px'
    }
})
</script>

<template>
    <div class="unewindex" :style="{ height: getHeight }">
        <el-scrollbar>
            <div class="unewbody">
                <div v-for="item1 in categoryname" :key="item1" class="categorydiv">
                    <el-divider content-position="left">
                        <p>{{ item1 }}</p>
                    </el-divider>
                    <div class="categorycon">
                        <el-scrollbar>
                            <div class="scrollbar-flex-content">
                                <div v-for="(item2, index) in getcategorycon(item1)" :key="item2">
                                    <el-tooltip :content="item2.newsTitle" placement="top">
                                        <el-card :body-style="{ padding: '0px', height: '45vh', width: '17vw' }"
                                            shadow="hover" style="cursor: pointer;overflow: hidden;"
                                            @click="turntonews(item2)">
                                            <img v-if="!showif(item2.newsImagePath)" :src="item2.newsImagePath"
                                                class="image" />
                                            <video v-if="showif(item2.newsImagePath)" :src="item2.newsImagePath"
                                                class="image" />
                                            <span
                                                style="font-weight:600;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif">
                                                NO.{{
                                                    index + 1
                                                }}</span>
                                            <span style="font-size:xx-small;display: block;">{{ item2.newsTitle
                                            }}</span>
                                        </el-card>
                                    </el-tooltip>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<style scoped>
.unewindex {
    background-color: #ffffff;
    border-radius: 10px;
}

.unewbody {
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: space-between;

}

.categorydiv {
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin-bottom: 5px;
}

.scrollbar-flex-content {
    display: flex;
    justify-content: space-between;

}

.scrollbar-flex-content div:nth-child(2n+1) {
    margin-right: 10px;
}

.scrollbar-flex-content div:nth-child(2n) {
    margin-right: 10px;
}

.scrollbar-flex-content div:last-child {
    margin-right: 0;
}


.categorydiv p {
    background-color: papayawhip;
    border-radius: 2px;
    margin-left: 5px;
    font-size: smaller;
    align-self: flex-start;

}

.image {
    width: 100%;
    height: 75%;
    display: block;
}

.categorycon {
    display: flex;
}
</style>